---
title: Text Animate
date: 2025-01-01
description: A text animation component that animates text using a variety of different animations.
author: nyxb
published: true
---

<ComponentPreview 
name="text-animate-demo"
description="A text animation component that animates text using a variety of different animations."
 />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add text-animate-demo
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="text-animate" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Blur In by Text

<ComponentPreview name="text-animate-demo-2" />

### Slide Up by Word

<ComponentPreview name="text-animate-demo-3" />

### Scale Up by Text

<ComponentPreview name="text-animate-demo-4" />

### Fade In by Line

<ComponentPreview name="text-animate-demo-5" />

### Slide Left by Character

<ComponentPreview name="text-animate-demo-6" />

## Props

| Prop          | Type                                        | Default    | Description                                               |
| ------------- | ------------------------------------------- | ---------- | --------------------------------------------------------- |
| `children`    | `string`                                    | `-`        | The text content to animate                               |
| `className`   | `string`                                    | `-`        | The class name to be applied to the component             |
| `delay`       | `number`                                    | `0`        | Delay before animation starts                             |
| `duration`    | `number`                                    | `0.3`      | Duration of the animation                                 |
| `variants`    | `Variants`                                  | `-`        | Custom motion variants for the animation                  |
| `as`          | `ElementType`                               | `"p"`      | The element type to render                                |
| `by`          | `"text" \| "word" \| "character" \| "line"` | `"word"`   | How to split the text ("text", "word", "character")       |
| `startOnView` | `boolean`                                   | `true`     | Whether to start animation when component enters viewport |
| `animation`   | `AnimationVariant`                          | `"fadeIn"` | The animation preset to use                               |
